<template>
    <div v-bind:[attbutes]="id">v-bind的绑定</div>
    <button @click="attbutes='class'">点击切换class样式</button>
    <hr>
    <!--div是水面层 最上面的一层-->
    <div @click="fastcn">

        <button @click.stop="stopbtn">.stop 是阻止事件冒泡</button><br>
        <!-- <button @click.prevent="preventBtn">阻止默认事件</button> -->
        <a :href="url" @click.prevent="preventBtn">阻止默认事件</a><br>
        <button @click.once="onceBtn">.once只触发一次</button>
    </div>


</template>
<script>
export default {
    data() {
        return {
            id: 'd1',
            attbutes: "id",
            url: 'https://www.baidu.com'

        }
    },
    methods: {
        fastcn() { 
            console.log('水面层被点击了');

            
        },
        stopbtn() { 
            console.log('触发了事件冒泡');
            
        },
        onceBtn() { 
            console.log('只触发一次');
            // this.onceBtn = () => {
            //     console.log('只触发一次')
            // }
        }
    }
}

</script>
<style scoped>
.d1{
    color: red;
}
#d1{
    background-color: aquamarine;
}
</style>